<template>
  <div class="pie3-box" v-if="show">
    <ul class="pie3">
      <li
        v-for="(item, index) of data"
        :key="index"
      >
        <div class="pie-box">
          <pie
            :data="item.data"
            :title="item.title"
            :color="color"
            :pieSize="pieSize"
          >
          </pie>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Pie from '@/common/echarts/Pie'
export default {
  name: 'Pie3',
  components: {
    Pie
  },
  props: {
    'data': {
      type: Array,
      default () {
        return [
          {
            title: '2018-06月',
            data: [
              {value: 0, name: '偏轻'},
              {value: 0, name: '均值'},
              {value: 0, name: '肥胖'},
              {value: 0, name: '超重'}
            ]
          },
          {
            title: '2018-07月',
            data: [
              {value: 0, name: '偏轻'},
              {value: 0, name: '均值'},
              {value: 0, name: '肥胖'},
              {value: 0, name: '超重'}
            ]
          },
          {
            title: '2018-08月',
            data: [
              {value: 0, name: '偏轻'},
              {value: 0, name: '均值'},
              {value: 0, name: '肥胖'},
              {value: 0, name: '超重'}
            ]
          }
        ]
      }
    }
  },
  data () {
    return {
      show: true,
      color: ['#315bff', '#7193ff', '#53e9ee', '#ffe98f', '#7343ff'],
      pieSize: {
        radius: ['0%', '40%'],
        center: ['50%', '50%'],
        title: {
          top: 10,
          left: 0,
          fontSize: 14
        }
      }
    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="stylus" scoped>
.pie3-box
  width: 100%
  height: 100%
  .pie3
    height: 100%
    width: 100%
    li
      padding: 10px 4px
      box-sizing: border-box
      width: 33.3%
      height: 100%
      float: left
      .pie-box
        width: 100%
        height: 100%
        background: rgba(23, 48, 117, .2)
        border-radius: 4px
</style>
